<template>
	<view class="avatar shuipingchuizhi">
		<template v-if="size == 'small'">
			<view class="avatar_box shuipingchuizhi">
				<view class="avatar_box_name">
					{{ computedNam(name) }}
				</view>
			</view>
		</template>
		<template v-if="size == 'big'">
			<view class="avatar_bigbox shuipingchuizhi">
				<view class="avatar_bigbox_bigname">
					{{ computedNam(name) }}
				</view>
			</view>
		</template>
		<template v-if="size == 'verybig'">
			<view class="avatar_verybigbox shuipingchuizhi">
				<view class="avatar_verybigbox_bigname">
					{{ computedNam(name) }}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				requred: true,
				type: String,
				default () {
					return "无";
				},
			},
			size: {
				requred: true,
				type: String,
				default () {
					return "small";
				},
			},
		},
		methods: {
			computedNam(name) {
				return name;
				// const size = this.size
				// switch (size) {
				// 	case 'small':
				// 		const newname = subStrName(name, 'small')
				// 		return newname
				// 		break;
				// 	case 'big':
				// 		const newBigname = subStrName(name, 'big')

				// 		return newBigname
				// 		break;
				// 	case 'verybig':
				// 		const newverybigname = subStrName(name, 'verybig')
				// 		return newverybigname
				// 		break;

				// }
			},
		},
	};
</script>

<style lang="less" scoped>
	.avatar {
		width: 100%;
		height: 100%;

		&_box {
			width: 25rpx;
			height: 25rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #0089ff;

			&_name {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 25rpx;
				line-height: 25rpx;
				text-align: center;
				transform: scale(0.5);
			}
		}

		&_bigbox {
			width: 80rpx;
			height: 80rpx;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #0089ff;

			&_bigname {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 25rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}

		&_verybigbox {
			width: 128rpx;
			height: 128rpx;
			overflow: hidden;
			background-color: #0089ff;
			border-radius: 15rpx;

			&_bigname {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 35rpx;
				line-height: 128rpx;
				text-align: center;
			}
		}
	}
</style>
